<!-- Forked from https://microsoft.github.io/monaco-editor/ -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width" />

    <title>ktfmt - the Kotlin code formatter</title>

    <link data-inline="yes-please" href="./lib/bootstrap-cosmo.css" rel="stylesheet"/>
    <link data-inline="yes-please" href="./lib/bootstrap-responsive.min.css" rel="stylesheet"/>
    <link data-inline="yes-please" href="./all.css" rel="stylesheet" />
    <link data-inline="yes-please" href="./index/index.css" rel="stylesheet" />

    <link data-name="vs/editor/editor.main"
      rel="stylesheet"
      href="node_modules/monaco-editor/min/vs/editor/editor.main.css"
    />
  </head>

  <body>
    <a id="gh-link" href="https://github.com/facebook/ktfmt"
      ><img
        loading="lazy"
        width="149"
        height="149"
        src="https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png?resize=149%2C149"
        class="attachment-full size-full"
        alt="Fork me on GitHub"
        data-recalc-dims="1"
    /></a>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <div class="logo">
            ktfmt
          </div>
          <div class="logo">
            <a href="index.html">- the Kotlin code formatter</a>
          </div>
          <!-- collapse button for smaller screens -->
          <button
            type="button"
            class="btn btn-navbar"
            data-toggle="collapse"
            data-target=".nav-collapse"
          >
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <!-- navbar title -->
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li>
                <a
                  class="nav-item"
                  href="https://github.com/facebook/ktfmt"
                  >GitHub</a
                >
              </li>
              <li>
                <a
                  class="nav-item"
                  href="https://kotlinlang.slack.com/archives/C01GZCU0QNB"
                  >Slack</a
                >
              </li>
              <li>
                <a
                  class="nav-item"
                  href="https://search.maven.org/artifact/com.facebook/ktfmt/{{version}}/jar"
                  >Maven Central</a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
    <section class="try">
      <div class="container">
        <h3>About</h3>
        <div class="row">
          <div class="span12">
            <br />
            <p>
              <code>ktfmt</code> is a program that pretty-prints (formats)
              Kotlin code.
            </p>
            <p>
              It always produces the same result, regardless of how the code
              looks initially, freeing developers to focus on essence.
            </p>
            <p>
                It is by design non-customizable in order to promote consistency.
              </p>
            </div>
        </div>
        <hr />
        <h3>Usage</h3>
        <div class="row">
          <div class="span12">
            <br />
            <ul class="nav nav-tabs" id="usage_tab">
              <li class="active">
                <a href="#usage_intellij" data-toggle="tab"
                  >IntelliJ / Android Studio</a
                >
              </li>
              <li>
                <a href="#usage_gradle" data-toggle="tab">Gradle</a>
              </li>
              <li><a href="#usage_maven" data-toggle="tab">Maven</a></li>
              <li><a href="#usage_cli" data-toggle="tab">Command line</a></li>
            </ul>
            <div class="tab-content">
              <div class="tab-pane active" id="usage_intellij">
                <p>
                  A ktfmt plugin that augments the Reformat Code action (<code>⌥⌘L</code>) is available from JetBrains Marketplace.
                </p>
                <a class="btn btn-info" href="https://plugins.jetbrains.com/plugin/14912-ktfmt" target="_blank">Install</a>
              </div>
              <div class="tab-pane" id="usage_gradle">
                <p>
                  <u><b>Spotless</b></u> (<a
                    href="https://github.com/diffplug/spotless/tree/main/plugin-gradle#ktfmt"
                    >details</a
                  >):
                </p>

                <pre>
# build.gradle.kts
plugins { id("com.diffplug.spotless") }

// version and style are optional
spotless { kotlin { ktfmt('{{version}}').kotlinlangStyle() } }
</pre
                >

                <p>or,</p>
                <p>
                  <u><b>ktfmt-gradle</b></u> (<a
                    href="https://github.com/cortinico/ktfmt-gradle#how-to-use-"
                    >details</a
                  >):
                </p>
                <pre>
# build.gradle.kts
plugins { id("com.ncorti.ktfmt.gradle") }

ktfmt { kotlinLangStyle() }
</pre
                >
              </div>
              <div class="tab-pane" id="usage_maven">
                <p>
                  <u><b>Spotless</b></u> (<a
                    href="https://github.com/diffplug/spotless/tree/main/plugin-maven#ktfmt"
                    >details</a
                  >):
                </p>

                <pre>
# pom.xml
&lt;configuration&gt;
  &lt;kotlin&gt;
    &lt;ktfmt&gt;
      &lt;version&gt;{{version}}&lt;/version&gt;
    &lt;/ktfmt&gt;
  &lt;/kotlin&gt;
&lt;/configuration&gt;
</pre
                >
              </div>
              <div class="tab-pane" id="usage_cli">
                <p>
                  Download the jar from Maven Central and invoke it using
                  <code>java</code>:
                </p>
                <pre>
$ wget https://repo1.maven.org/maven2/com/facebook/ktfmt/{{version}}/ktfmt-{{version}}-jar-with-dependencies.jar
$ java -jar ktfmt-{{version}}-jar-with-dependencies.jar [--kotlinlang-style] [files...]
</pre
                >
              </div>
            </div>
          </div>
        </div>
        <hr />
        <h3>Try It Online</h3>
        <small>Running v{{version}}</small>
        <div class="editor row">
          <div class="span12">
            <div class="row">
              <form id="editorForm" name="editorForm">
                <div class="span3">
                  <label class="control-label">Style</label>
                  <select class="style-picker input-medium">
                    <option>kotlinlang</option>
                    <option>Java-like</option>
                  </select>
                </div>
                <div class="span3">
                  <label class="control-label">Column Limit</label>
                  <input
                    class="input-small column-limit-picker"
                    type="number"
                    min="50"
                    max="140"
                    class="form-control"
                    id="column_limit"
                    value="100"
                    required
                  />
                </div>
                <div class="span4 pull-right">
                  <button class="btn btn-primary pull-right" type="submit">
                    Format
                  </button>
                  <p
                    id="error-message"
                    class="text-error"
                    style="display: none"
                  >
                    Donec ullamcorper nulla non metus auctor fringilla.
                  </p>
                </div>
              </form>
            </div>
            <div class="editor-frame">
              <div class="loading editor" style="display: none">
                <div class="progress progress-striped active">
                  <div class="bar"></div>
                </div>
              </div>
              <div id="editor"></div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <footer class="container">
      <hr />
      <p class="text-center">
        [
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://opensource.facebook.com/legal/privacy/"
          >Privacy</a
        >
        ] [
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://opensource.facebook.com/legal/terms/"
          >Terms</a
        >
        ] [
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://opensource.facebook.com/legal/data-policy/"
          >Data Policy</a
        >
        ] [
        <a
          target="_blank"
          rel="noopener noreferrer"
          href="https://opensource.facebook.com/legal/cookie-policy/"
          >Cookie Policy</a
        >
        ]
      </p>
      <p class="text-center">
        <a href="https://opensource.facebook.com/" title="Facebook Open Source">
          <img
            src="img/oss_logo.png"
            alt="Facebook Open Source"
            style="max-height: 50px; margin-bottom: 12px"
          />
        </a>
        <br />
        <small>Copyright &copy; Meta Platforms, Inc. Based on <a href="https://microsoft.github.io/monaco-editor">https://microsoft.github.io/monaco-editor</a></small>
      </p>
    </footer>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"
      integrity="sha256-wS9gmOZBqsqWxgIVgA8Y9WcQOa7PgSIX+rPA0VL2rbQ="
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/bootstrap.min.js"
      integrity="sha256-u+l2mGjpmGK/mFgUncmMcFKdMijvV+J3odlDJZSNUu8="
      crossorigin="anonymous"
    ></script>

    <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
    <script src="node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
    <script src="node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>
    <script data-inline="yes-please" src="./index/index.js"></script>
  </body>
</html>
